<template>
    <div class="page indexPage">
        <div id="container" style="height: 0;"></div>
        <div class="mapWrap" v-show="showMapS">
            <div class="flex-container">
                <input id="tipinput" class="mapSe" placeholder="城市名/拼音"/>
                <span @click="showMapS=!showMapS">取消</span>
            </div>
            <div class="defWrap">
                <h3>定位/最近访问</h3>
                <p>{{position}}</p>
                <h3>热门城市</h3>
                <ul class="flex-container">
                    <li @click="selectAdTo('苏州')">苏州</li>
                    <li @click="selectAdTo('上海')">上海</li>
                    <li @click="selectAdTo('上海')">上海</li>
                    <li @click="selectAdTo('南京')">南京</li>
                    <li @click="selectAdTo('苏州')">杭州</li>
                    <li @click="selectAdTo('南通')">南通</li>
                    <li @click="selectAdTo('泰州')">泰州</li>
                    <li @click="selectAdTo('镇江')">镇江</li>
                    <li @click="selectAdTo('北京')">北京</li>
                </ul>
            </div>
        </div>
        <!--头部logo-->
        <div class="indexHeadWrap">
            <div class="FitHeight20"></div>
            <div class="indexHead flex-container">
                <div @click="selectAd" class="dots">{{position}}</div>
                <div><img src="../assets/icon/logo.png"/></div>
                <div></div>
            </div>
        </div>
        <!--头部广告-->
        <div class="swiper-container indexSwiper" id="bannerTop">
            <div class="swiper-wrapper">
                <a class="swiper-slide" v-for="item in carousel" :href="item.o.Url"><img :src="item.Img"/></a>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--按钮导航-->
        <ul class="navLists flex-container">
            <li v-for="item in navList" @click="jump(item.href , item.name)">
                <img :src="item.icon"/>
                <p>{{item.name}}</p>
            </li>
        </ul>
        <!--近期活动-->
        <div class="activity">
            <div class="comTitle show1px"><img src="./../assets/icon/activity.png"/><span>近期活动</span><a href="http://feiyutiyu.cn/wap/Activity.html">更多</a></div>
            <ul>
                <li class="show1px" v-for="item in Act" @click="jump(item.ActUrl)">
                    <h3>{{item.o.Name}}</h3>
                    <p>地址：{{item.o.Adress}}</p>
                    <p>活动时间：{{item.startTime}}</p>
                    <p>发布者：{{item.org.Name}}</p>
                    <span>{{item.o.Tags}}</span>
                    <div>不限<a :class="{active:item.state==='报名中'}">{{item.state}}</a></div>
                </li>
            </ul>
        </div>
        <!--周边赛事-->
        <div class="game">
            <div class="comTitle show1px"><img src="./../assets/icon/game.png"/><span>周边赛事</span><a href="http://feiyutiyu.cn/wap/Match.html">更多</a></div>
            <div class="swiper-container indexSwiper swiperB" id="bannerBottom">
                <div class="swiper-wrapper">
                    <a class="swiper-slide" v-for="item in Mat" :href="item.MatUrl">
                        <img :src="item.Img"/>
                        <p class="state" :class="{active:item.state==='报名中'}">{{item.state}}</p>
                        <div class="time" :class="{active:item.state==='报名中'}">{{item.startTime}}~{{item.endTime}}</div>
                    </a>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--底部tabBar-->
        <div class="tabBarWrap">
            <div class="tabBar flex-container">
                <router-link class="active" to="/"><span></span><p>首页</p></router-link>
                <router-link to="/wallet"><span></span><p>钱包</p></router-link>
                <router-link to="/userCenter"><span></span><p>个人中心</p></router-link>
            </div>
            <div class="FitHeight20"></div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import utils from './../js/utils';
    export default {
        name: "index",
        data(){
            return {
                navList:[
                    { name: '订场' , icon: require('../assets/navList/1.png'), href: 'http://feiyutiyu.cn/wap/venue.html?sportindex=0'},
                    { name: '培训' , icon: require('../assets/navList/2.png'), href: 'http://feiyutiyu.cn/wap/TrainAllList.html'},
                    { name: '赛事' , icon: require('../assets/navList/3.png'), href: 'http://feiyutiyu.cn/wap/Match.html'},
                    { name: '活动' , icon: require('../assets/navList/4.png'), href: 'http://feiyutiyu.cn/wap/Activity.html'},
                    { name: '私教' , icon: require('../assets/navList/5.png'), href: 'http://feiyutiyu.cn/wap/coach.html'},
                  /*  { name: '商城' , icon: require('../assets/navList/6.png'), href: 'javascript:alert("开发中")'},*/
                   /* { name: '理财' , icon: require('../assets/navList/7.png'), href: 'https://www.mszxyh.com/wapserver/outer/index.html?ChannelId=mszx02489&seq=DZZH_20180312132065&Page=index'},*/
                    { name: '会员' , icon: require('../assets/navList/8.png'), href: 'http://feiyutiyu.cn/wap/VipCard.html'}
                ],
                carousel:[],
                Act:[],
                Mat:[],
                position: '定位中',
                showMapS: false
            }
        },
        activated(){
            this.showMapS = false;
            this.GetActMat();
            this.getPosition();
        },
        updated(){
            utils.swiper('#bannerTop' ,Swiper);
            utils.swiper('#bannerBottom' ,Swiper);
        },
        methods:{
            /*
            * 获取当前位置
            * */
            getPosition(){
                let that = this,
                    map = new AMap.Map('container') ,
                    position = utils.getSessionStorage('position');
                if(position){
                    that.position = position;
                }else{
                    map.plugin(["AMap.CitySearch"], function() {
                        let citysearch = new AMap.CitySearch();
                        //自动获取用户IP，返回当前城市
                        citysearch.getLocalCity();
                        AMap.event.addListener(citysearch, "complete", function(result){
                            that.position = result.city;
                        });
                        AMap.event.addListener(citysearch, "error", function(result){
                            that.position = '定位失败';
                        });
                    });
                }
                //输入提示
                AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
                    let autoOptions = { input: "tipinput"};
                    let autocomplete= new AMap.Autocomplete(autoOptions);
                    let placeSearch = new AMap.PlaceSearch({
                        map:map
                    });
                    AMap.event.addListener(autocomplete, "select", function(e){
                       that.position = e.poi.name;
                       utils.setSessionStorage('position' , that.position);
                       that.showMapS = false;
                    });
                });
            },
            /*
            * 首页数据获取
            * */
            GetActMat(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Data/GetActMat',
                    method: 'get',
                    success: function (result) {
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        let data = result.data;
                        that.carousel = data.carousel;
                        that.Act = data.Act;
                        that.Mat = data.Mat;
                    }
                })
            },
            /*
            * 页面跳转
            * */
            jump(href ,name){
                if(name == '订场'){
                    this.$router.push({ path: '/venueList'});
                    return;
                }
                location.href = href;
            },
            selectAd(){
                this.showMapS = true;
                document.getElementById('tipinput').value = '';
            },
            selectAdTo(str){
                this.position = str;
                this.showMapS = false;
                utils.setSessionStorage('position' , str);
            }
        }
    }
</script>

<style scoped>
    .page{padding-bottom: 2.5rem;}
    .indexSwiper img{width: 100%;}
    .swiper-slide{display: block;}
    .indexHeadWrap{position: fixed;left: 0;top: 0;z-index: 999;width: 100%;background: #fff;}
    .indexHead{width: 100%;background: #fff;height: 2.2rem;line-height: 2.2rem;justify-content: space-between;padding: 0 0.75rem;box-shadow: 0 1px 1px #f1f1f1;}
    .indexHead > div{height: 2.2rem;font-size: 0.75rem;color: #000;padding-right: 1rem;}
    .indexHead > div:nth-child(2){font-size: 0.85rem;color: #000;width: auto;}
    .indexHead img{height: 1rem;vertical-align: middle;}
    .indexHead > div:first-child{background: url(./../assets/icon/arrow-bottom.svg) no-repeat right center / 0.8rem;max-width: 4rem;flex: none;}
    .indexHead > div:last-child{background: url(./../assets/icon/search.svg) no-repeat right center / 1.2rem;flex: none;width: 2.2rem;}
    .navLists{flex-wrap: wrap;text-align: center;padding-top: 0.8rem;background: #fff;}
    .navLists li{width: 25%;padding-bottom: 0.8rem;font-size: 0.6rem;}
    .navLists img{width: 45%;margin-bottom: 0.2rem;}
    .activity{margin-top: 0.25rem;background: #fff;}
    .game{margin-top: 0.25rem;background: #fff;}
    .game .indexSwiper{padding: 1rem 0 2rem;}
    .comTitle{height: 2.2rem;line-height: 2.2rem;background: #fff;padding: 0 0.75rem;color: #fff;position: relative;}
    .comTitle a{float: right;display: inline-block;width: 2.2rem;text-align: right;color: #fff;}
    .comTitle img{width: 1rem;vertical-align: middle;margin-right: 0.5rem;}
    .comTitle span{display: inline-block;vertical-align: bottom;line-height: 2.1rem;}
    .activity li{color: #6b6b6b;position: relative;padding: 0.75rem;font-size: 0.6rem;}
    .activity p{margin-top: 0.25rem;}
    .activity h3{color: #333333;font-size: 0.7rem;}
    .activity ul span{position: absolute;top: 0.75rem;right: 0.75rem;background: #00acfd;color: #fff;padding: 0.05rem 0.4rem;border-radius: 0.2rem;}
    .activity li div{position: absolute;right: 0.75rem;bottom: 0.75rem;}
    .activity li a{color: #9e9ea0;padding-left: 1rem;}
    .activity li a.active{color: #00acfd;}
    .swiperB .state{position: absolute;left: 0.75rem;bottom: 0.5rem;background: #78787A;font-size: 0.6rem;color: #fff;padding: 0.1rem 0.6rem;border-radius: 1.1rem;}
    .swiperB .time{position: absolute;right: 0;bottom: 0;font-size: 0.6rem;background: #78787A;color: #fff;padding: 0.1rem 0.6rem 0.1rem 0.8rem;border-top-left-radius: 2.2rem;}
    .swiperB .state.active{background: #00acfd;}
    .swiperB .time.active{background: #00acfd;}
    .mapWrap{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 1000;background: #fff;}
    .mapWrap > div:first-child{position: fixed;top: 0;border-bottom: 1px solid #f1f1f1;left: 0;width: 100%;height: 3rem;line-height: 3rem;justify-content: center;align-items: center;}
    .mapSe{height: 1.8rem;line-height: 1.2rem;padding: 0.3rem 0;background: #EBECEE url(./../assets/icon/search.svg) no-repeat 0.5rem center / 1.1rem;border: none;font-size: 0.75rem;width: 72%;border-radius: 0.9rem;padding-left: 2rem;}
    .mapWrap span{display: inline-block;margin-left: 1rem;font-size: 0.75rem;}
    .defWrap{margin-top: 2.25rem;padding: 0.75rem;}
    .mapWrap h3{color: #999;font-size: 0.8rem;margin: 0.75rem 0;}
    .defWrap p{height: 1.8rem;background: #f1f1f1;line-height: 1.8rem;padding: 0 1.2rem;display: inline-block;}
    .defWrap ul{flex-wrap: wrap;justify-content: space-between;}
    .defWrap ul li{flex: none;width: 30%;height: 1.8rem;background: #f1f1f1;text-align: center;line-height: 1.8rem;margin-bottom: 1rem;}
    .activity .comTitle{background: linear-gradient(to bottom , #45aefe ,#58d2ff )}
    .game .comTitle{background: linear-gradient(to bottom , #8f1af9 ,#b462ff )}
</style>
